<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>手势测试</title>
    <style>
        img {
            border: 2px red solid;
            display: block;
            margin: 20px;
        }

        a {
            display: block;
            margin: 20px;
        }

        div {
            padding: 20px 0px;
        }

        #shareToWechat {
            margin: 100px auto;
            width: 100%;
            border: 1px solid black;
            height: 50px;
        }
    </style>
</head>

<body>
    <div style="width: 100%;height: 100%;" id="container">
        老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。为报倾城随太守，亲射虎，看孙郎。酒酣胸胆尚开张，鬓微霜，又何妨。持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535021701018&di=00f1e0db377eab51749bcf072d2e9f35&imgtype=0&src=http%3A%2F%2Fs1.sinaimg.cn%2Fbmiddle%2F3f47f0834476fabebf750"
            id="mydiv" style="margin-left:15%;width:70%;">
        超级赛亚人，出自漫画家鸟山明的代表作《龙珠》，是战斗民族赛亚人特有的变身形态。据说赛亚人中每一千年才会出现一个传说中的超级赛亚人，变身条件要情绪异常愤怒，从而爆发力量。变身成功产生S细胞，拥有S细胞的下一代变身难度降低。
        由于《龙珠》漫画、动画的广泛影响，“超级赛亚人”也逐渐成为网络用语，有时候形容一个人的身体素质或某些行为超乎常人也会用该词（注：本文仅统计集英社《龙珠》系列漫画及东映《龙珠》系列动画中出现的超级赛亚人。）
        以上纯属测试，哈哈哈哈哈哈哈
        <a href="https://github.com/FantasticLBP">@杭城小刘</a>
        <img src="./IMG_6493.png" id="shareContent" style="margin-left:15%;width:70%;">
        <input type="button" value="分享朋友圈" id="shareToWechat" />
        </dic>

</body>
<script src="./lib.js"></script>
<script src="./toImage.js"></script>
<script type="text/javascript" src="./html2canvas.js"></script>
<script>
    $(document).ready(function () {
        $.fn.longPress = function (fn) {
            var timeout = undefined;
            var $this = this;
            for (var i = 0; i < $this.length; i++) {
                $this[i].addEventListener('touchstart', function (event) {
                    timeout = setTimeout(fn, 800);  //长按时间超过800ms，则执行传入的方法
                }, false);
                $this[i].addEventListener('touchend', function (event) {
                    clearTimeout(timeout);  //长按时间少于800ms，不会执行传入的方法
                }, false);
            }
        }
        $('#mydiv').longPress(function () {
            alert("大哥，你长按我这么久干嘛？？？");
        });

        function takeScreenshot() {

            html2canvas(document.getElementById('shareContent')).then(function (canvas) {
                let imgString = canvas.toDataURL("image/jpeg", 1.0);
                $(`<img src=${imgString} id="mydiv" style="margin-left:15%;width:70%;" data-share="true">`).appendTo("#container");
            });
        }

        $("#shareToWechat").click(function () {
            takeScreenshot();
            // $('<img src="IMG_6493.png" id="mydiv" style="margin-left:15%;width:70%;" data-share="true"> ').appendTo("#container");

            setTimeout(() => {
                let shareImageUrl = $(document).find('[data-share]')[0].src;
                requestHybrid({
                    //创建一个新的webview对话框窗口
                    tagname: 'shareToWewchat',
                    //请求参数，会被Native使用
                    param: {
                        shareImageUrl: shareImageUrl
                    },
                    //Native处理成功后回调前端的方法
                    callback: function (data) {
                        alert(data);
                    }
                });
            }, 1000);
        });
    });

    window.lbp = function () {
        alert("@杭城小刘");
    }

    var LBPMethod = {
        name: "js下的方法",
        coding: function () {
            alert("生命不息，coding");
        }
    }


    window.Hybrid = window.Hybrid || {};

    var loadURL = function (url) {
        var iFrame;
        iFrame = document.createElement("iframe");
        iFrame.style.height = "1px";
        iFrame.style.width = "1px";
        iFrame.style.display = "none";
        iFrame.src = url;
        document.body.appendChild(iFrame);
        setTimeout(function () {
            iFrame.remove();
        }, 100);
    }


    var _getHybridUrl = function (params) {
        var k, paramStr = '', url = 'JSBridge://';
        url += params.tagname + '?t=' + new Date().getTime(); //时间戳，防止url不起效
        if (params.callback) {
            url += '&callback=' + params.callback;
            delete params.callback;
        }
        if (params.param) {
            paramStr = typeof params.param == 'object' ? JSON.stringify(params.param) : params.param;
            url += '&param=' + encodeURIComponent(paramStr);
        }
        return url;
    };

    var requestHybrid = function (params) {
        //生成唯一执行函数，执行后销毁
        var tt = (new Date().getTime());
        var t = 'hybrid_' + tt;
        var tmpFn;

        //处理有回调的情况
        if (params.callback) {
            tmpFn = params.callback;
            params.callback = t;
            window.Hybrid[t] = function (data) {
                tmpFn(data);
                delete window.Hybrid[t];
            }
        }
        loadURL(_getHybridUrl(params));
    };
</script>

</html>